<template>
  <div class="map">
    <div id="map-box"></div>
    <div id="panel"></div>
    <form class="serch">
      起点：<input type="text" v-model="startplace" placeholder="请输入起点" /><br />
      终点：<input type="text" v-model="endplace" placeholder="请输入终点点" /><br />
      <input type="button" value="查询" @click="serchDiving" />
    </form>
  </div>
</template>

<script setup lang="ts">
import { shallowRef, ref, nextTick, onMounted } from 'vue'
import AMapLoader from '@amap/amap-jsapi-loader'

const startplace = ref('淞虹路')
const endplace = ref('虹桥火车站')

const map = shallowRef(null)
const keyword = ref('')
const coord = ref('')
const data = ref([])
const loading = ref(false)
let AMapObj: any, placeSearch: any, marker: any, geocoder: any

// window._AMapSecurityConfig = {
//   securityJsCode: 'd1004817b7a81314ef6fc583306eaf30'
// }

const initMap = async () => {
  return await new Promise((resolve, reject) => {
    AMapLoader.load({
      key: '49d7eed681d657e0ed754f0464a99ec7', // 设置您的key
      version: '2.0',
      // plugins: ['AMap.ToolBar', 'AMap.Driving'],
      // AMapUI: {
      //   version: '1.1',
      //   plugins: []
      // },
      // Loca: {
      //   version: '2.0.0'
      // }
    })
      .then((AMap) => {
        AMapObj = AMap
        console.log('initMap')
        map.value = new AMap.Map('map-box', {
          zoom: 13,
      center: [116.397428, 39.90923] // 北京市经纬度
          })
          return resolve(AMapObj)

       

      })
      .catch((e) => {
        console.log(e)
      })
  })
}


const serchDiving = () => {
  // return false
  AMapObj.plugin('AMap.Driving', function () {
    var driving = new AMapObj.Driving({
      map: map.value,
      panel: 'panel'
    })
    console.log(startplace.value, endplace.value)
    driving.clear()
    driving.search([{ keyword: startplace.value }, { keyword: endplace.value }])
  })
}

onMounted(async() => {
  // nextTick(async () => {
    await initMap()
    console.log('onmounted')
  // })
})
</script>

<style>
.map,
#map-box {
  height: 100%;
}
.serch {
  position: fixed;
  width: 360px;
  height: 215px;
  z-index: 99;
  top: 20px;
  left: 20px;
  padding: 14px;
  padding-bottom: 68px;
  background: #3d93fd;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}
</style>
